<template>
  <el-form>
    <el-form-item label="社交分销">
      <el-switch
        v-model="switchValue"
        active-color="#13ce66"
        inactive-color="#ff4949">
      </el-switch>
      <div style="padding-left:120px;">
        <span>
          开启社交分销，你的社交分销应用将即时生效，关闭后，前端所有相关入口都会关闭，请勿随意关闭开关
      （社交分销生效终端为小程序端，设置完成后，可扫描左上方预览-小程序码体验）
        </span>
      </div>
    </el-form-item>
    <el-form-item>
      <el-button type="primary">基础设置</el-button>
      <el-button type="primary">分销员招募</el-button>
      <el-button type="primary">奖励模式</el-button>
      <el-button type="primary">多级分销</el-button>
    </el-form-item>
    <el-form-item label="分销员名称：">
      <el-input placeholder="分销员名称" style="width: 150px;" value="分销员"></el-input>
      <div style="padding-left:120px;">
        <span>
          如设置为“分销员”，则分销员在前台将展示为“分销员”。
        </span>
      </div>
    </el-form-item>
    <el-form-item label="分销员小店：">
      <el-switch
        v-model="switchShopValue"
        active-color="#13ce66"
        inactive-color="#ff4949">
      </el-switch>
      <div style="padding-left:120px;">
        <span>
          开启分销小店，每个分销员可拥有自己的店铺，可自行选品上架并推广自己的店铺。关闭后，所有分享出去的小店链接都将失效。
        </span>
      </div>
    </el-form-item>
    <el-form-item label="小店名称：">
      <el-input placeholder="小店名称" style="width: 150px;" value="店铺"></el-input>
      <div style="padding-left:120px;">
        <span>
         如设置为“小店”，则用户小明的小店将展示为“小明的小店”。
        </span>
      </div>
    </el-form-item>
    <el-form-item label="店铺分享图片：">
      <el-upload
        v-model="imageUrl"
        class="avatar-uploader"
        :action="imgUrl"
        :show-file-list="false"
        :on-success="handleAvatarSuccess">
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>

      <div style="padding-left:120px;">
        <span>
          建议：尺寸750*1334px，图片格式jpg、png，大小不超过500k
        </span>
      </div>
    </el-form-item>
    <el-form-item label="注册限制：">
      <el-radio v-model="radio" label="1">不限</el-radio>
      <el-radio v-model="radio" label="2">仅限有效注册</el-radio>
      <div style="padding-left:120px;">
        <span>
          仅限邀请注册即注册时必填邀请码或通过邀请链接注册，注册后绑定邀请关系
        </span>
      </div>
    </el-form-item>
    <el-form-item label="邀新奖励限制：">
      <el-radio v-model="radio2" label="1">不限</el-radio>
      <el-radio v-model="radio2" label="2">仅限有效邀新</el-radio>
      <div style="padding-left:120px;">
        <span>
          邀请到完成一笔订单并且未产生退货的客户被视为有效邀新
        </span>
      </div>
    </el-form-item>

    <el-form-item label="佣金返利优先级：">
      <el-radio v-model="radio3" label="1">邀请人优先</el-radio>
      <el-radio v-model="radio3" label="2">店铺优先</el-radio>
      <div style="padding-left:120px;">
        <span>
          邀请人优先即佣金返给下单客户的邀请人，无邀请人时或邀请人为普通客户时佣金返给当前下单店铺的分销员<br>
          店铺优先即佣金返给当前下单店铺的分销员，未在店铺内购买时佣金返利给邀请人（邀请人为普通客户时不返利）
        </span>
      </div>
    </el-form-item>
    <el-form-item label="商品审核：">
      <el-switch
        v-model="switchValue2"
        active-color="#13ce66"
        inactive-color="#ff4949">
      </el-switch>
    </el-form-item>
    <el-form-item label="分销业绩规则说明：">
      <div style="padding-left:135px;">
        <span>
          <span style="font-size: 16px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-family: sans-serif; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;"> 销售业绩规则：</span>
          <br>
          <span style="font-size: 11pt; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(255, 0, 0);">1、销售额：</span>
          <p> 会员通过分销员的分享链接或在分销员的店铺内下单，已付款的订单金额计为分销员的销售额（不计配送费，不包含分销员的自购金额）<br>
          若订单被取消或申请退款，不扣减销售额 </p>
          <span style="font-size: 11pt; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(255, 0, 0);">2、预估收益： </span>
           <p>会员通过分销员的分享链接或在分销员的店铺内下单，已付款的订单对应的返利金额计为分销员的预估收益（不包含分销员的自购返利） <br>
           若订单取消或退款，不扣减预估收益 </p>
          <span style="font-size: 11pt; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(255, 0, 0);">3、合计业绩： </span>
          <p> 当前查询日期的汇总数据 </p>
          <span style="font-size: 11pt; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(255, 0, 0);">4、日销售业绩： </span>
          <p> 默认展示最近7天的数据  <br>
           -最近7天，最新数据为昨天  <br>
           -最近30天，最新数据为昨日 <br>
           -自然月，点击自然月，下拉展示最近6个月的月份，最新数据为上个月份； 选中月份，展示该月份的每日销售数据； </p>
          <span style="font-size: 11pt; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(255, 0, 0);">5、月销售业绩： </span>
           <p>-每月销售额和预估收益 <br>
           -最新月份默认为上个月 <br>
           -月销售业绩最多展示近6个月（不包含当月） <br>
          <p> 业绩数据均次日进行更新，若对数据有疑问可咨询客服哦~ </p>
        </span>
      </div>
    </el-form-item>


    <el-form-item>
      <el-button type="primary" align="center">确定</el-button>
    </el-form-item>
  </el-form>


</template>

<script>
  export default {
    data() {
      return {
        radio: '1',
        radio2: '1',
        radio3: '1',
        imageUrl: '',
        imgUrl: this.utils.imgUploadUrl,
        switchShopValue: true,
        switchValue: true,
        switchValue2: true
      }
    },
    models: {
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        console.log(res);
        this.dataForm.dpic = res.data.imgUrl;
      },
    }
  };
</script>


<style scoped>
  p{
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
